<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: MineMikoto
 * @LastEditTime: 2021-07-06 22:54:29
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 轮播 -->
    <!-- {{carousels}} -->
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in carousels" :key="item.id">
        <img :src="item.url" alt="" style="width: 100%" />
      </el-carousel-item>
    </el-carousel>
    <!-- /轮播 -->
    <!-- 项目 -->
    <div class="projects">
      <div class="wrapper">
        <div class="title">校园活动</div>
        <!-- {{projects}} -->
        <div
          class="project"
          @click="toProject(project.id)"
          v-for="project in projects.list"
          :key="project.id"
        >
          <div class="project_pic">
            <img :src="project.figure" alt="" />
          </div>
          <div class="project_info">
            <div class="project_name">{{ project.name }}</div>
            <div>
              {{ project.beginTime | dateFormat }} ~
              {{ project.endTime | dateFormat }}
            </div>
            <div>{{ project.introduce }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="projects">
      <div class="wrapper">
        <div class="title">文章</div>
        <!-- {{projects}} -->
        <!-- {{articles.list}} -->
        <div
          class="project"
          @click="toArticle(article.id)"
          v-for="article in articles.list"
          :key="article.id"
        >
          <div class="project_pic">
            <img :src="article.cover" alt="" />
          </div>
          <div class="project_info">
            <div class="project_name">{{ article.title }}</div>
            <div>
              {{ article.publishTime | dateFormat }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
// 1. 引入ajax接口，请求工具
import { get } from "../utils/request";
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      projects: {},
      articles: {},
      carousels: [],
    };
  },
  created() {
    // 3. 在页面加载的时候调用
    this.loadProjects();
    this.loadCarousels();
    this.loadArticles();
  },
  methods: {
    // 查询轮播图
    loadCarousels() {
      let url = "/index/carousel/findAll";
      get(url).then((resp) => {
        this.carousels = resp.data;
      });
    },
    // 2. 定义一个加载数据的方法
    loadProjects() {
      let url = "/index/project/pageQuery";
      let param = { page: 1, pageSize: 10 };
      get(url, param).then((resp) => {
        this.projects = resp.data;
      });
    },
    loadArticles() {
      let url = "/index/article/pageQuery";
      let param = { page: 1, pageSize: 10 };
      get(url, param).then((resp) => {
        this.articles = resp.data;
      });
    },
    toProject(id) {
      // 跳转
      this.$router.push({
        path: "/project",
        query: { projectId: id },
      });
    },
    toArticle(id) {
      this.$router.push({
        path: "/article",
        query: { articleId: id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .title {
    font-size: 20px;
    line-height: 2em;
    font-weight: bold;
  }
  // 居中容器
  .wrapper {
    width: 90%;
    margin: 0 auto;
  }
  // 大图
  .bg_pic {
    img {
      width: 100%;
    }
  }
  // 游学项目
  .projects {
    .project {
      margin-bottom: 1em;
      & > div {
        height: 200px;
      }
      .project_pic {
        width: 300px;
        float: left;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .project_info {
        margin-left: 320px;
        .project_name {
          line-height: 1.6em;
          font-weight: bolder;
        }
      }
    }
  }
}
</style>